<script src="https://cdn.bootcss.com/vee-validate/2.0.0-rc.18/vee-validate.min.js"></script>
<script src="https://cdn.bootcss.com/vee-validate/2.0.0-rc.18/locale/zh_CN.js"></script>
<style>
    .is-danger {
        color: red
    }
</style>
<form id="app" @submit.prevent="validateBeforeSubmit">
    <div class="form-group">
        <label>日期</label>
        <input v-model="date" type="date" class="form-control" name="date" v-validate="'required'" />
        <span v-show="errors.has('date')" class="help is-danger">{{ errors.first('date') }}</span>
    </div>

    <div class="form-group">
        <label>客户名称</label>
        <input v-model="customer_name" type="text" class="form-control" v-validate="'required'" name="customer_name" />
        <span v-show="errors.has('customer_name')" class="help is-danger">{{ errors.first('customer_name') }}</span>
    </div>

    <div class="form-group">
        <label>客户编号</label>
        <input v-model="num" type="text" class="form-control" />
    </div>

    <div class="form-group">
        <label>产品名称</label>
        <input v-model="product" type="text" class="form-control" v-validate="'required'" name="product" />
        <span v-show="errors.has('product')" class="help is-danger">{{ errors.first('product') }}</span>
    </div>

    <div class="form-group">
        <label>产品数量</label>
        <input v-model="product_number" type="text" class="form-control" />
    </div>

    <div class="form-group">
        <label>包装费</label>
        <input v-model="package" type="text" class="form-control" />
    </div>

    <div class="form-group">
        <label>纸箱费</label>
        <input v-model="carton" type="text" class="form-control" />
    </div>

    <div class="form-group">
        <label>提付费</label>
        <input v-model="pay" type="text" class="form-control" />
    </div>

    <div class="form-group">
        <label>费用</label>
        <input v-model="fee" type="text" class="form-control" />
    </div>

    <div class="form-group">
        <label>费用合计</label>
        <input v-model="pay_all" type="text" class="form-control" />
    </div>

    <div class="form-group">
        <label>备注</label>
        <input v-model="remark" type="text" class="form-control" />
    </div>

    <div class="form-group">
        <label>invoice</label>
        <input v-model="invoice_order" type="text" v-validate="'required'" class="form-control" name="invoice" />
        <span v-show="errors.has('invoice')" class="help is-danger">{{ errors.first('invoice') }}</span>
    </div>

    <button class="btn btn-success">提交</button>
    <form>
        <script>
            Vue.use(VeeValidate,{
                locale: 'zh_CN',
            })
            new Vue({
                el: "#app",
                data: {
                    date: "",
                    num: "",
                    customer_name: "",
                    product: "",
                    product_number: "",
                    package: 0.00,
                    carton: "",
                    pay: 0.00,
                    fee: 0.00,
                    pay_all: "",
                    remark: "",
                    invoice_order: ""
                },
                methods: {
                    validateBeforeSubmit: function() {
                        this.$validator.validateAll().then((res) => {
                            if (res) {
                                var url = "/table/add_repo"
                                $.post(url, {data:this.$data}, function(res) {
                                    if (res.code == 1) {
                                        layer.confirm(res.msg, {}, function() {
                                            window.location.reload();
                                        })
                                    } else {
                                        layer.alert(res.msg);
                                    }
                                }, 'json')
                            }
                        })
                    }
                }
            })
        </script>